﻿@model MailTemplateModel
<div id="admin_mails" class="page" v-cloak>
    <Tabs ref="tabs" v-model="currentTab">
        <TabPane label="邮件模板管理">
            <datagrid ref="mailgrid" :columns="gridColumns" :edit="editSetting" v-on:new="newTemplate" :url="'@ViewBag.DataUrl'" :params="{menuId:@Model.MenuId}"></datagrid>
        </TabPane>
        <TabPane :label="editTitle" v-show="editTitle">
            <i-form ref="form" action="@ViewBag.SubmitUrl" class="am-form-h box box-form" @@success="submitSuccess">
                <input type="hidden" name="Id" id="mail_id" value="0" />
                <input type="hidden" name="MenuId" value="@Model.MenuId" />
                <form-item label="语言" label-for="mail_lang">
                    <select name="Lang" id="mail_lang" style="width:100%">
                        @foreach (var item in Model.Languages)
                        {
                            if (item.id == "CN")
                            {
                                <option value="@item.id" selected>@item.text</option>
                            }
                            else
                            {
                                <option value="@item.id">@item.text</option>
                            }
                        }
                    </select>
                </form-item>
                <form-item label="标签" label-for="mail_label">
                    <input type="text" name="Label" id="mail_label" />
                </form-item>
                <form-item label="标题" label-for="mail_label" :required="true">
                    <input type="text" name="Title" id="mail_title" required />
                </form-item>
                <form-item label="内容" :required="true">
                    <editor ref="content" name="Content" style="width:100%;height:300px" @@on-ready="editorReady()" placeholder="<p>请输入邮件模板...</p>" required></editor>
                </form-item>
                <div class="am-text-center">
                    <a class="am-btn am-btn-default" style="margin-right:20px" onclick="mail_vm.reset()">重置</a>
                    <input type="submit" value="保存模板" class="am-btn am-btn-success" />
                </div>
            </i-form>
        </TabPane>
    </Tabs>
</div>
@section script {
    @Html.GetEditorScripts()
    <script>
    var mail_vm = new Vue({
        el: '#admin_mails',
        data: {
            currentTab: 0,
            editSetting: {showNew:true,delUrl:'@ViewBag.DelUrl'},
            editTitle: '',
            gridData: [],
            gridColumns: [
                        { bind: 'Id', title: '编号' },
                        {  bind: 'Label', title: '标签' },
                        {
                            bind: 'Title', title: '标题', format: function (val, data) {
                                return '<a href="@ViewBag.ViewUrl?id=' + data.Id + '&menuid=@Model.MenuId" target="_blank">' + val + "</a>";
                            }
                        },
                        { bind: 'Lang', title: '语言' },
                        {
                            bind: 'ByOrder', title: '排序', width: '100px', format: function (val, data) {
                                var html = '<div class="tb-item-edit"><a class="am-btn am-btn-info" onclick="mail_vm.setOrder('+data.Id+',' + val + ',\'up\')"><i class="am-icon-arrow-up"></i></a>';
                                html += '<a class="am-btn am-btn-danger" onclick="mail_vm.setOrder(' + data.Id + ',' + val + ',\'down\')"><i class="am-icon-arrow-down"></i></a></div>';
                                return html;
                            }
                        },
                        {
                            bind: 'Id', title: '编辑', width:'100px', format: function (val, data) {
                                var html = '<div class="tb-item-edit"><a class="am-btn am-btn-info" onclick="mail_vm.editMail(' + val + ')"><i class="am-icon-edit"></i></a>';
                                html += '<a class="am-btn am-btn-danger" onclick="mail_vm.delMail(' + val + ')"><i class="am-icon-trash"></i></a></div>';
                                return html;
                            }
                        },
                        { bind: 'LastModify', title: '更新时间' }
            ]
        },
        methods: {
            reset: function() {
                this.$refs.form.reset();
            },
            setOrder: function (id, order, type) {
                var self = this;
                $.post('@ViewBag.SetOrderUrl', { id: id, order: order, type: type, menuId: @Model.MenuId }, function (result) {
                    if (result.succ) {
                        self.$refs.mailgrid.reload();
                    } else {
                        alert(result.data);
                    }
                });
            },
            editMail: function (id) {
                var self = this;
                $.post('@ViewBag.InfoUrl', { id: id, menuId: @Model.MenuId }, function (result) {
                    if (result.succ) {
                        self.currentTab = 1;
                        self.editTitle = "编辑邮件模板";
                        self.$refs.form.fill(result.data);
                    } else {
                        alert(result.data);
                    }
                });
            },
            delMail: function (id) {
                if (confirm("确定删除？")) {
                    $.post('@ViewBag.DelUrl', { ids: id, menuId: @Model.MenuId }, function (result) {
                        if (result.succ) {
                            mail_vm.$refs.mailgrid.reload();
                        } else {
                            alert(result.data);
                        }
                    });
                }
            },
            newTemplate: function () {
                this.reset();
                $('#mail_id').val('0');
                this.currentTab = 1;
                this.editTitle = "新建邮件模板";
            },
            editorReady: function () {
                setTimeout(this.reset(), 800)
            },
            submitSuccess: function (data) {
                this.currentTab = 0;
                this.editTitle = '';
                this.$refs.mailgrid.reload();
                this.$Message.success("保存成功");
            }
        },
        mounted: function () {
            this.$form = $(this.$refs.form.$el);
        }
    });
    </script>
}